<template>
  <!--  粉丝列表-->
  <div class="app">
    <div class="message">
      <div class="msg_left">按关注时间排序</div>
      <div class="msg_right">
        <span v-for="item in msg" :key="item">{{ item }}</span>
      </div>
    </div>
    <!--    本周更新-->
    <div class="card_f">
      <div inset class="card">
        <span>本周更新</span>
        <span>0人更新 <van-icon name="arrow" /></span>
      </div>
    </div>
    <!--    //下拉刷新-->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="(item, index) in list" :key="item.id" class="dataCard">
        <img :src="item.avatarUrl" alt="" class="headerImg" />
        <div class="friends">
          <i class="signature">{{ item.nickname }}</i>
          <i class="signature">{{ item.signature }}</i>
        </div>
        <!-- signature-->
        <div class="statusBar" @click="cut(index)">
          <span v-if="index == index1">关注</span>
          <span v-else>互相关注</span>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: ["全部", "歌手", "用户"],
      list: [],
      loading: false,
      finished: false,
      page: 1,
      uid: localStorage.getItem("uid"),
      font: true,
      index1: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    watchList() {
      this.loading = true;
      this.$http
        .get(`http://localhost:3000/user/followeds?uid=${this.uid}&limit=50`, {
          withCredentials: true,
          page: this.page,
        })
        .then((res) => {
          this.list = res.data.followeds;
          console.log(res);
        });
      this.loading = false;
      if (this.list.length > 25) {
        this.finished = true;
      }
    },
    cut(index) {
      console.log(index);
      // this.font=!this.font;
      this.index1 = index;
    },
    abrogate() {
      this.list.forEach((lists) => {
        this.$http
          .get(`http://localhost:3000/follow?id=${lists.userId}`, {
            withCredentials: true,
            page: this.page,
          })
          .then((res) => {
            console.log(res);
          });
      });
    },
    onLoad() {
      //默认只执行一次
      this.watchList();
    },
  },
  created() {
    this.abrogate();
    // console.log(this.uid);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.app {
  height: 3rem;
  width: 100%;
  background: #fff;
}
.message {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  height: 3rem;
  margin: 0 auto;
  font-size: 0.9rem;
  color: #414141;
}
.msg_right span::after {
  content: "|";
  margin: 0 0.5rem;
  color: #999999;
}
.msg_right span {
  color: #999999;
}
.msg_right span:last-child::after {
  content: "";
}
.card {
  background: #fff;
  border: 1px solid #e6e6e6;
  display: flex;
  margin: auto;
  justify-content: space-between;
  width: 95%;
  align-items: center;
  border-radius: 10px;
  height: 3rem;
  font-size: 14px;
}
.card_f {
  width: 100%;
  height: 3.5rem;
  background: #fff;
  padding: 0.5rem 0;
}
.card span {
  margin: 0 0.8rem;
}
.signature:first-child {
  /*font-size: 12px;*/
  font-size: 16px;
}

.signature:last-child {
  font-size: 12px;
  margin-top: 0.5rem;
  color: #949393;
  /*white-space:nowrap;*/
  /*overflow: hidden;*/
  /*text-overflow:ellipsis;*/
}

.msg_right span {
  color: #999999;
}

.msg_right span:last-child::after {
  content: "";
}

.headerImg {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-left: 1rem;
}

.dataCard {
  display: flex;
  align-items: center;
  width: 100%;
  height: 6rem;
  font-size: 14px;
  background: #fff;
}

.statusBar {
  /*flex: 1;*/
  width: 4rem;
  height: 1.5rem;
  /*padding: 0.5rem 1rem;*/
  border: 1px solid #ff3a3a;
  text-align: center;
  color: #ff3a3a;
  border-radius: 1rem;
  margin-right: 2.5rem;
}
.friends {
  flex: 6;
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  justify-content: center;
  height: 100%;
  margin-left: 1.2rem;
}

.card span {
  margin: 0 0.8rem;
}
</style>
